<template>
  <a-card style="height: 100%">
    <a-row>
      <a-col :span="16">
        <template #title>
          表单
        </template>
        <a-form :model="form">
          <draggable
            v-model="formItems"
            style="width: 100%; margin: 0px; height: 100%"
            item-key="name"
            group="TpFormGroup"
            head-style="height:20px;"
            animation="300"
            @add="add"
          >
            <template
              #item="{ element,index }"
              style="width: 100%; margin: 0px; height: 100%"
            >
              <div @click="divClick(element,index)">
                <r-h-item
                  v-model:form="form"
                  v-model:item="formItems[index]"
                />
              </div>
            </template>
          </draggable>

          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button
              type="primary"
              @click.prevent="submit"
            >
              Create
            </a-button>
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="8">
        <a-card
          style="width: 100%"
          :tab-list="tabList"
          :active-tab-key="activeTabKey"
          @tabChange="key => onTabChange(key, 'key')"
        >
          <template #customTab="item">
            <span v-if="item.key === 'tab1'">
              <home-outlined />
              {{ item.key }}
            </span>
          </template>

          <r-h-designer-content-right
            v-if="activeTabKey === 'formItem' && activeFormItemIndex != null"
            :key="'form-item-'+activeFormItemIndex"
            v-model:items="formItems"
            :index="activeFormItemIndex"
          />
          <!--          <component-->
          <!--            :is="activeFormItemComponent"-->
          <!--            -->
          <!--            :key="Math.random()"-->
          <!--            v-model="formItems"-->
          <!--          />-->
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts">
// start	开始拖动时触发的事件
// add	从一个数组拖拽到另外一个数组时触发的事件
// remove	移除事件
// update	拖拽变换位置时触发的事件
// end	拖拽完成时的事件
// choose	鼠标点击选中要拖拽元素时的事件
// unchoose	选中后松开鼠标的事件
// sort	位置变化时的事件
// clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素
import draggable from 'vuedraggable'
import RHItem from '@/components/RHForm/RHItem/index.vue'
import { defineComponent, ref } from 'vue'
import RHDesignerContentRight from '@/components/RHForm/RHDesigner/RHDesignerContent/right.vue'
export default defineComponent({
  name: 'RHDesignerContent',
  components: { RHDesignerContentRight, RHItem, draggable },
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },

  setup(props) {
    const formItems = ref(props.items)
    const form:any = ref({})
    return {
      formItems,
      form
    }
  },
  data() {
    return {
      tabList: [
        {
          key: 'formItem',
          tab: '表单项设计'
        },
        {
          key: 'form',
          tab: '表单设计'
        }
      ],
      activeTabKey: 'formItem',
      // 选中表单项
      activeFormItemIndex: null,
      activeFormItemComponent: null
    }
  },
  watch: {
    formItems(formItems) {
      console.log(formItems)
    }
  },
  methods: {
    add(evt:any) {
      const param:any = this.formItems[evt.newIndex]
      const dataIndex = String(param.dataIndex)
      this.form[dataIndex] = param.value
      console.log('form', this.form)
    },
    divClick(item:any, index:any) {
      this.activeFormItemIndex = index
    },
    onUpdate: function(/** Event*/ evt:any) {
      console.log('onUpdate', evt)
    },
    onChange: function(/** Event*/ evt:any) {
      evt.newIndex // most likely why this event is used is to get the dragging element's current index
      console.log('onChange', evt)
    },
    submit: function(e:any) {
      console.log(this.form, e)
      console.log(this.formItems)
    },
    getItem: function(e:any) {
      //
    },
    onTabChange: function(value:string, type:string) {
      this.activeTabKey = value
    }
  }

})
</script>
